<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment::head(~{::title},~{})">
    <title>GZC的个人博客</title>
</head>
<body>
<!-- 头部导航栏 -->
<div th:replace="~{_fragment::blog-header('index')}"></div>

<!-- 内容区 -->
<div class="blog-content">
    <div class="layui-container">
        <div class="layui-row">
            <!--公告轮播区开始-->
            <div class="blog-broadcast">
                <div class="layui-carousel" id="notice-broadcast">
                    <div carousel-item id="notice-content"></div>
                </div>
            </div>
            <!--公告轮播区结束-->
        </div>
        <div class="layui-row">
            <div class="layui-col-md8">
                <!-- 文章展示小卡片 -->
                <div id="index-cards"></div>
                <!-- 分页DIV -->
                <div id="index-page-util" class="page-box"></div>
            </div>
            <div class="layui-col-md4">
                <!-- 关于我卡片 -->
                <div class="info-card animated bounceInRight">
                    <div class="info-card-header">
                        <i class="layui-icon layui-icon-about"></i>
                        关于博主
                    </div>
                    <div class="info-card-body" id="blogger-info">
                        <img th:src="${blogger.avatar?:'/img/default_avatar.png'}"/>
                        <p th:text="${blogger.userName}">暂无数据</p>
                        <p th:text="${blogger.signature}">暂无数据</p>
                    </div>
                    <div class="info-card-footer">
                        <a href="javasript:;" id="qq" title="QQ"><i class="fa fa-qq"></i></a>
                        <a href="javasript:;" id="wechat" title="微信"><i class="fa fa-weixin"></i></a>
                        <a th:href="@{/leavemessage}" id="lm" title="留言"><i class="fa fa-commenting"></i></a>
                        <a href="https://github.com/GZC986707252" id="github" target="_blank" title="github"><i
                                class="fa fa-github"></i></a>
                    </div>
                </div>
                <!-- 最新动态 -->
                <div class="base-card animated bounceInRight delay-1s">
                    <div class="base-card-header">
                        <i class="layui-icon layui-icon-log"></i>最新动态
                        <span style="float: right;">
                            <a th:href="@{/timeline}">more<i class="layui-icon layui-icon-right"></i></a>
                        </span>
                    </div>
                    <div class="base-card-body">
                        <ul class="layui-timeline">
                            <li class="layui-timeline-item" id="latest-diary">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">......</h3>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 底部版权区 -->
<div th:replace="_fragment::blog-footer"></div>

<link rel="stylesheet" type="text/css" th:href="@{/css/index.css}"/>
<script id="contentTpl" type="text/html">
    {{#  layui.each(d,function(index,item){  }}
    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text animated bounceInRight delay-{{index+1}}s">
            <h3 class="layui-timeline-title">{{item.createTime}}</h3>
            {{item.content}}
        </div>
    </li>
    {{#   });  }}
</script>
<script type="text/html" id="index-articleCard">
    <!-- 文章展示小卡片 -->
    <div class="article-card animated flipInX">
        <div class="article-title">
            <a href="/article/details/{{d.articleId}}">{{d.title}}</a>
            {{# if(d.isOriginal){ }}
            <span class="layui-badge layui-bg-green">原创</span>
            {{# }else{ }}
            <span class="layui-badge">转载</span>
            {{# } }}
            {{# if(d.isTop){ }}
            <span class="layui-badge layui-bg-blue">置顶</span>
            {{# } }}
        </div>
        <div class="article-abstract">
            <span>{{ d.contentHtml }}</span>
        </div>
        <!-- 卡片底部展示发表时间、用户、分类 和 标签等-->
        <div class="article-bottom">
					<span>
					<i class="layui-icon layui-icon-time"></i>
						{{d.createTime}}
					</span>
            <span>
					<i class="layui-icon layui-icon-username"></i>&nbsp;{{d.user.userName}}
					</span>
            <span>
					<i class="fa fa-folder-o"></i>
					<a href="/article/category/{{d.categoryId}}">{{ d.category.categoryName }}</a>&nbsp;&nbsp;
					</span>
            <span>
                <i class="layui-icon layui-icon-note"></i>&nbsp;
                {{# layui.each(d.tags,function(index,tag){   }}
                <a href="/article/tag/{{tag.tagId}}">{{tag.tagName}}&nbsp;&nbsp;</a>
                {{#  });  }}
            </span>
            <span>
                <!-- 评论数和浏览数 -->
                <i class="fa fa-commenting-o"></i>10
                &nbsp<i class="fa fa-eye"></i>1000
            </span>
        </div>
    </div>
</script>
<script type="text/javascript" th:src="@{/js/index.js}"></script>
<script type="text/javascript" th:src="@{/js/global.js}"></script>
</body>
</html>
